import React, { Component } from 'react'
import {
  View, TextInput, StyleSheet, Text, Image, SafeAreaView, Navigator, ScrollView, TouchableOpacity
} from 'react-native'
import NavBar from '../../../../components/PublicHeader';
import { Images } from '../../../../public/images/images'

export default class Storagespace extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }


  }

  componentDidMount = () => {


  }

  onChangeText(text) {
    this.setState({
      searchText: text
    })
  };

  onClick() {

  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <NavBar
          navigation={this.props.navigation}
          title={"储存空间"}
        />
        <View style={{ backgroundColor: "#FFFFFF" }}>
          <View style={styles.head}>
            <Text style={styles.heads}></Text>
            <Text style={styles.headsTEXT}></Text>
            <Text style={styles.headsTEXTs}></Text>
          </View>
          <View style={styles.middle}>
            <Text style={{ marginLeft: "5%", marginTop: '1%' }}></Text>
            <Text style={styles.middles}></Text>
            <Text style={styles.wenzhi}>俊码星球已用空间</Text>
            <Text style={styles.middhee}></Text>
            <Text style={styles.wenzhi}>手机已用空间</Text>
            <Text style={styles.middhe}></Text>
            <Text style={styles.wenzhi}>手机可用空间</Text>
          </View>
          <View style={{ backgroundColor: '#FFFFFF', marginTop: 10 }}>
            <Text style={styles.content}>俊码星球已用空间</Text>
            <Text style={styles.contents}>1.2GB</Text>
            <Text style={{ fontSize: 15, marginLeft: '5%', marginBottom: 30 }}>占用手机2%存储空间</Text>
          </View>
        </View>
        <View style={{ marginTop: '8%', backgroundColor: '#FFFFFF', height: 129 }}>
          <View style={styles.tail}>
            <Text style={styles.tails}>缓存</Text>
            <Text style={styles.tailText}>清理</Text>
          </View>
          <Text style={{ fontSize: 22, marginLeft: '5%', marginRight: '5%', marginBottom: 10 }}>1.2GB</Text>
          <Text style={styles.tailTexts}>缓存是使用俊码星球过程中产生得临时数据，清理缓存不会影响俊码星球的正常使用</Text>
        </View>
      </SafeAreaView >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    textAlign: 'center'
  },
  layer: {
    display: 'flex',
    justifyContent: 'space-around'
    , alignItems: 'center',
    flexDirection: 'row',
    marginTop: 80

  },
  General: {
    flexDirection: 'row', height: 40, lineHeight: 40, marginLeft: '7%', justifyContent: 'space-between',
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2'
  },
  Generals: {
    marginTop: '4%', backgroundColor: 'white'
  },
  wenzhi: {
    fontSize: 15, color: '#999999', lineHeight: 20,
    marginRight: '4%'
  },
  head: {
    flexDirection: 'row', backgroundColor: '#FFFFFF', marginTop: 30
  },
  heads: {
    width: '20%', backgroundColor: '#1890FF', marginLeft: '5%', borderBottomLeftRadius: 10, borderTopLeftRadius: 10
  },
  headsTEXT: {
    width: '48%', backgroundColor: '#F1C248'
  },
  headsTEXTs: {
    width: '20%', backgroundColor: '#EDEDED', borderBottomRightRadius: 10, borderTopRightRadius: 10
  },
  middle: {
    flexDirection: 'row', height: 20, backgroundColor: '#FFFFFF', marginTop: 20
  },
  middles: {
    width: 12, height: 12, backgroundColor: '#1890FF', borderRadius: 6, marginTop: '0.5%',
  },
  middhe: {
    width: 12, height: 12, backgroundColor: '#EDEDED', borderRadius: 7, marginTop: '0.5%'

  },
  content: {
    marginTop: '5%', marginLeft: '5%', fontSize: 15
  },
  contents: {
    fontSize: 22, fontWeight: 'bold', marginLeft: '5%', marginTop: 5, marginBottom: 5
  },
  tail: {
    flexDirection: 'row', justifyContent: 'space-between', marginLeft: '5%', marginRight: '5%', marginTop: 15
  },
  tails: {
    fontSize: 15, width: 60, height: 30, lineHeight: 30
  },
  tailText: {
    width: 60, height: 30, backgroundColor: '#1890FF', color: '#FFFFFF', textAlign: 'center', lineHeight: 30, borderRadius: 15,
  },
  tailTexts: {
    fontSize: 11, color: '#999999', marginLeft: '5%', marginRight: '5%',
  },
  middhee: {
    width: 12, height: 12, backgroundColor: '#F1C248', borderRadius: 7, marginTop: '0.5%'
  }

})